import React, { useContext, useState, useEffect } from "react";
// import Context from "../../../../../index";
import { Observer } from "mobx-react";
// import { Context } from "../../../../../index";
import { Context } from "../../../../../store/MyContext";

import http from "../../../../../services/service";

import { Button, Row, Col, Form, Input, Select } from "antd";

import "./Filters.scss";

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

/* eslint-disable no-template-curly-in-string */
const { Search } = Input;

const validateMessages = {
  required: "${label} is required!",
  types: {
    email: "${label} is not a valid email!",
    number: "${label} is not a valid number!",
  },
  number: {
    range: "${label} must be between ${min} and ${max}",
  },
};
/* eslint-enable no-template-curly-in-string */
//搜 测试 广州 美年大健康
const Filters = (props) => {
  const context = useContext(Context);
  const [form] = Form.useForm();
  const [alOrganization, setalOrganization] = useState([]);
  const [chinaCity, setchinaCity] = useState([]);

  const { getSearch, getAllSets } = props;
  useEffect(() => {
    getCities();
    getAllOrganization();
  }, []);

  //获取城市信息
  let getCities = () => {
    http.get("/api1/getCities").then((response) => {
      // console.log(111, response.data);
      setchinaCity(response.data);
    });
  };

  //获取机构信息
  let getAllOrganization = () => {
    http.get("/api1/getAllOrganization").then((response) => {
      // console.log(111, response.data);
      setalOrganization(response.data);
    });
  };

  //点击搜索
  const onFinish = (values) => {
    // console.log(99, "搜索回车");
    console.log(100, values);
    getSearch(values);
  };

  //点击重置

  let resetFile = () => {
    form.resetFields();
    getAllSets();
  };

  return (
    <Observer>
      {() => (
        <Form
          form={form}
          name='nest-messages'
          onFinish={onFinish}
          validateMessages={validateMessages}
          // initialValues={{ setsName: "请输入项目名称" }}
        >
          {/* 总包裹行 */}
          <Row gutter={24}>
            {/* 输入查询 */}
            <Col
              className='colStyle'
              xl={{ span: 5 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              {/* onSearch={searchSets} */}
              <Form.Item name={["user", "setsName"]}>
                <Search
                  onSearch={onFinish}
                  // onPressEnter={onFinish}
                  placeholder={`请输入项目名称`}
                />
              </Form.Item>
            </Col>
            {/* 适用地区 */}
            <Col
              className='colStyle'
              xl={{ span: 5 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item name={["user", "city"]}>
                <Select placeholder='请选择城市'>
                  {chinaCity.map((item, index) => (
                    <Select.Option key={index} value={item.cityName}>
                      {item.cityName}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            {/* 适用机构 */}
            <Col
              className='colStyle'
              xl={{ span: 7 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item name={["user", "org"]} label='适用机构'>
                <Select>
                  {alOrganization.map((item, index) => (
                    <Select.Option key={index} value={item.org_name}>
                      {item.org_name}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col
              className='colStyle'
              xl={{ span: 7 }}
              md={{ span: 24 }}
              sm={{ span: 24 }}
              xs={{ span: 24 }}
            >
              <Row type='flex' align='middle' justify='space-between'>
                <div>
                  <Button
                    type='primary'
                    htmlType='submit'
                    style={{ marginRight: "15px" }}
                  >
                    查询
                  </Button>
                  {/* onClick={context.addA(10)} */}
                  <Button type='ghost' onClick={resetFile}>
                    重置
                  </Button>
                </div>
                {/* <span>
                  data from store:{context.isVisible ? "true" : "false"}
                </span> */}
                <Button type='ghost' onClick={context.showModal}>
                  添加
                </Button>
              </Row>
            </Col>
          </Row>
        </Form>
      )}
    </Observer>
  );
};

export default Filters;
